<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back> -->
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">姓名: </span>
                    <el-input v-model="name" placeholder="请输入姓名" style="float:left; width:auto;"></el-input>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchName">搜索</el-button>
                </div>
                <div class="search-item" style="float:right; margin:0;">
                    <el-button type="primary" @click="addTeacher">添加用户</el-button>
                    <el-button type="primary" @click="deleteList">删除用户</el-button>
                </div>
            </div>
            <div class="table-content" v-loading="tableLoading">
                <el-table
                :data="tableData"
                ref="multipleTable"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column type="selection">
                    </el-table-column>
                    <el-table-column prop="userName" label="姓名">
                    </el-table-column>
                    <el-table-column label="性别">
                        <template slot-scope="scope">
                            {{ scope.row.userSex == 'm' ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="userNumber" label="工号">
                    </el-table-column>
                    <el-table-column prop="telephone" label="联系方式">
                    </el-table-column>
                    <el-table-column prop="roleId" label="角色">
                        <template slot-scope="scope">
                            <span v-if="scope.row.roleId == 3">超级管理员</span>
                            <span v-if="scope.row.roleId == 4">普通管理员</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="modifyInfo(scope.row.id,scope.row.userName,scope.row.userSex,scope.row.telephone,scope.row.userNumber,scope.row.roleId)">修改</el-button>
                            <el-button type="text" size="small" @click="initPassword(scope.row.id)">初始化密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
            <el-dialog title="添加用戶" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                    <el-form-item label="姓名 :" prop="name">
                        <el-input type="text" v-model="form.name" style="width: 50%;" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别 :">
                        <el-radio-group v-model="form.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="联系方式 :">
                        <el-input v-model="form.contactWay" style="width:80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="工号 :" prop="jobId">
                        <el-input v-model="form.jobId" style="width:80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="角色 :" prop="characterValue">
                        <el-select
                            v-model="form.characterValue"
                            placeholder="请选择角色"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.characterStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="submitForm('form')">保存</el-button>
                </div>
            </el-dialog>
            <el-dialog title="修改用戶" :visible.sync="dialogFormVisible2" width="500px" @clsoe="closeModifyDialog">
                <el-form :model="form2" :rules="rules" ref="form2" label-width="100px">
                    <el-form-item label="姓名 :" prop="name">
                        <el-input type="text" v-model="form2.name" style="width: 50%;" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别 :">
                        <el-radio-group v-model="form2.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="联系方式 :">
                        <el-input v-model="form2.contactWay" style="width:80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="工号 :" prop="jobId">
                        <el-input disabled v-model="form2.jobId" style="width:80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="角色 :" prop="characterValue">
                        <el-select
                            v-model="form2.characterValue"
                            placeholder="请选择角色"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form2.characterStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="submitForm2('form2')">保存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    import {isvalidPhone} from './../../api/validate.js'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            //手机号验证
            var validPhone = (rule, value,callback)=>{
                if (!value){
                    callback(new Error('请输入电话号码'))
                }else  if (!isvalidPhone(value)){
                    callback(new Error('请输入正确的11位手机号码'))
                }else {
                    callback()
                }
            }
            return {
                result: '',
                name: '',
                tableLoading: false,
                tableData: [],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                multipleSelection: [],
                dialogFormVisible: false,
                form: {
                    name: '',
                    gender: 1,
                    contactWay: '',
                    jobId: '',
                    characterStatus: [
                        {
                            value: 3,
                            label: '超级管理员'
                        },
                        {
                            value: 4,
                            label: '普通管理员'
                        }
                    ],
                    characterValue: ''
                },
                //表单验证
				rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    namgendere: [
                        { required: true, message: '请选择性别', trigger: 'blur' }
                    ],
                    contactWay: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' },
                        { required: true, validator: validPhone, trigger: 'blur' }
                    ],
                    jobId: [
                        { required: true, message: '请输入工号', trigger: 'blur' }
                    ],
                    characterValue: [
                        { required: true, message: '请选择角色', trigger: 'change' }
                    ]
                },
                dialogFormVisible2: false,
                form2: {
                    name: '',
                    gender: 1,
                    contactWay: '',
                    jobId: '',
                    characterStatus: [
                        {
                            value: 3,
                            label: '超级管理员'
                        },
                        {
                            value: 4,
                            label: '普通管理员'
                        }
                    ],
                    characterValue: ''
                },
                 //表单验证
				rules2: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    namgendere: [
                        { required: true, message: '请选择性别', trigger: 'blur' }
                    ],
                    contactWay: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' },
                        { required: true, validator: validPhone, trigger: 'blur' }
                    ],
                    jobId: [
                        { required: true, message: '请输入工号', trigger: 'blur' }
                    ],
                    characterValue: [
                        { required: true, message: '请选择角色', trigger: 'change' }
                    ]
                },
                managerId: ''
            }
        },
        created () {
            this.init() //初始化
            this.result = JSON.parse(window.localStorage.getItem('access-user'))
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/system/manager/getManagerList?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&userName='+self.name).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
				this.multipleSelection = valArr
            },
            //搜索姓名
            searchName(){
                this.currentPage = 1
                this.init()
            },
            //修改
            modifyInfo(id,userName,userSex,telephone,userNumber,roleId) {
                this.dialogFormVisible2 = true
                this.managerId = id
                this.form2.name = userName
                this.form2.gender = userSex == 'm' ? 1 : 2
                this.form2.contactWay = telephone
                this.form2.jobId = userNumber
                this.form2.characterValue = roleId
            },
            //关闭弹窗
            closeModifyDialog(){
                this.$refs.form2.resetFields()
            },
            //添加用戶
            addTeacher() {
                this.dialogFormVisible = true
                this.form.name = ''
                this.form.gender = 1
                this.form.jobId = ''
                this.form.contactWay = ''
                this.form.characterValue = ''
            },
            //关闭弹窗
            closeDialog(){
                this.$refs.form.resetFields()
            },
            //添加教师表单提交
            submitForm(formName) {
                let self = this
				self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.$http.post('/dataplatform/system/manager/addManager',{
                            userName: self.form.name,
                            userSex: self.form.gender == 1 ? 'm' : 'f',
                            telephone: self.form.contactWay,
                            roleId: self.form.characterValue,
                            userNumber: self.form.jobId
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '添加成功',
                                    type: 'success'
                                })
                                self.init()
                                self.dialogFormVisible = false
                                self.$refs[formName].resetFields()
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //删除选中
			deleteList() {
				let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的信息',
                        type: 'warning'
                    })
					return
				}
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/dataplatform/system/manager/delUser',{
                        delType: 4,
                        idList: self.multipleSelection
                    }).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.currentPage = 1
							self.init()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				});
            },
            //初始化密码
            initPassword(id){
                let self = this
                self.$http.post('/dataplatform/system/mana/a/initializePassword',{
                    id: id
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '初始化成功',
                            type: 'success'
                        })
                        self.init()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //修改教师表单提交
            submitForm2(formName) {
                let self = this
				self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.$http.post('/dataplatform/system/manager/saveManager',{
                            id: self.managerId,
                            userName: self.form2.name,
                            userSex: self.form2.gender == 1 ? 'm' : 'f',
                            telephone: self.form2.contactWay,
                            roleId: self.form2.characterValue
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '修改成功',
                                    type: 'success'
                                })
                                self.init()
                                self.dialogFormVisible2 = false
                                self.$refs[formName].resetFields()
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
        }
    }
</script>
